<template>
  <div class="container">
    <div class="border-t flex div-category">
      <div class="border-r width-90 pad-t-10 pad-l-20">
        <!--一级-->
        <div class="pad-t-10 pad-b-10" v-for="(item1, index1) in listCategory" :key="index1" @click="showCategory(index1)">
          <div :class="firstIndex===index1?'category-l-sel':''" class="category-l align-c">
            {{ item1.label }}
          </div>
        </div>
      </div>
      <div class="flex-item pad-10 mar-l-10" v-if="listCategory[firstIndex]">
        <!--二级-->
        <div class="pad-t-10" v-for="(item2, index2) in listCategory[firstIndex].children" :key="index2">
          <div class="font-w">{{ item2.label }}</div>
          <div class="flex flex-wrap mar-t-10">
            <!--三级-->
            <div class="third-item" v-for="(item3, index3) in item2.children" :key="index3"
                 @click="$pt.navigateTo({ url: '/pages/shop/business-shop/main?categoryId=' + item3.categoryId + '&enterpriseId=' + enterpriseId })">
              <img class="width-65 height-65" :src="item3.image"/>
              <div class="pad-t-5 pad-b-10">{{ item3.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getEnterpriseGoodsCategorys } from '@/api/distribution'

  export default {
    data() {
      return {
        listCategory: [],
        firstIndex: 0,
        category: {},
        enterpriseId: null
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.enterpriseId = this.getCurrentPage().query.enterpriseId
      this.initListCategory()
    },
    methods: {
      initListCategory() {
        let data = ''
        if (this.enterpriseId) {
          data = this.enterpriseId
        } else {
          data = this.getEnterpriseId
        }
        if (!data) return false
        getEnterpriseGoodsCategorys(data).then((response) => {
          if (response.isError) return
          this.listCategory = response.data
        }).catch(() => {
        })
      },
      showCategory(index) {
        this.firstIndex = index
      }
    }
  }
</script>

<style lang="less" scoped>
  .third-item{
    width: 33%;
    text-align: center;
    image{
      display: inline-block;
    }
  }
  .goods-header {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
  }

  .goods-search {
    height: 32px;
    background: #f0f0f0;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .goods-search > span {
    margin-left: 10px;
    color: gray;
  }

  .div-category {
    background-color: #fff;
    min-height: 100vh;
  }

  .category-l {
    border-radius: 5px;
    width: 70px;
    overflow: hidden;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .category-l-sel {
    background-color: #f8c400;
  }
</style>
